<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="./plugins/boostrap/css/bootstrap.css">
    <link rel="stylesheet" href="./plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./archivalCustody.css">
</head>
<body style="background:#EFF3FC;" ng-app="app" ng-controller="fileCabinetCtrl">
<div class="clearfix">
    <div class="col-sm-12 padding0">
        <span style="display:inline-block;text-indent:20px;padding-top: 10px;padding-bottom: 10px;">档案管理 >档案库</span>
    </div>
    <div class="col-sm-12 pl20">
        <div class="col-sm-2 main-content" style="margin-right:20px;">
            <div class="menu-title">
                <span>档案柜</span>
            </div>
            <div id="fileCabinetTitle" class="" data-toggle="collapse" data-target="#totalFileCabinet">
                <h4 style="font-size:16px;cursor: pointer;" class="select-title pr45 text-align-r mb0"
                    ng-click="showAllFileCabinet()">
                    <span style="padding-right:25px;font-size:20px;color:#ccc;"
                          ng-class="{'fa-caret-down':expend,'fa-caret-right':!expend}" class="fa fa-caret-down"></span>
                    全部档案柜
                </h4>
            </div>
            <div id="totalFileCabinet" class="collapse" ng-class="{'in':showSecondMenu}"
                 aria-labelledby="fileCabinetTitle">
                <ul class="list-group">
                    <li ng-repeat="item in totalFileCabinet" id="{{ item.id }}"
                        ng-click="selectFileCabinet(item.id)"
                        style="cursor: pointer;"
                        class="list-group-item border-none pr45 text-align-r">{{ item.value }}</li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9 main-content">
            <div ng-show="!showSecondDetail">
                <div style="margin: 10px 5px;">
                    <button class="btn btn-primary" ng-click="addCabinat('add',1)">添加</button>
                </div>
                <table class="table table-striped table-hover" style="margin-top:20px;">
                    <thead class="table-header">
                    <tr>
                        <th><input type="checkbox" id="chkAll"></th>
                        <th>编号</th>
                        <th>格档数</th>
                        <th>材质</th>
                        <th>管理员</th>
                        <th>位置</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="fileCabinet in fileCabinetLists">
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>{{ fileCabinet.number }}</td>
                        <td>{{ fileCabinet.numFiles }}</td>
                        <td>{{ fileCabinet.Material }}</td>
                        <td>{{ fileCabinet.manger }}</td>
                        <td>{{ fileCabinet.address }}</td>
                        <td>{{ fileCabinet.remarks }}</td>
                        <td class="table-option pointer">
                            <span>
                                <a ng-click="editCabinat('edit','1')"><i class="fa fa-btn fa-edit"
                                                                         popover="编辑"></i></a>
                            </span>
                            <span>
                               <a ng-click="delCabinat()"><i class="fa fa-btn fa-trash"
                                                             popover="删除"></i></a>
                            </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div ng-show="showSecondDetail">
                <div class="col-sm-12">
                    <h4 style="font-size:16px;font-weight:bold;color:#ddd;">
                        <span>{{ cabinetNumber }}号柜</span>
                        <i style="font-size:20px;padding-right:10px;" class="fa fa-edit"></i>
                    </h4>
                </div>
                <div class="clearfix" ng-repeat="item in currentFileCabinetDetail" ng-show="showSecondDetail">
                    <div class="col-sm-12">
                        <div class="col-sm-1 cabinet-gird" style="margin-right:20px;">
                            <span class="text-middle">{{ item.name }}</span>
                        </div>
                        <div class="col-sm-9 cabinet-gird">
                            <div class="col-sm-1 border-style box-item" ng-repeat="box in item.children"
                                 ng-click="editFileBox(cabinetNumber,box.id,'edit')" ng-mouseenter="showtimes = true"
                                 ng-mouseleave="showtimes = false">
                                <button ng-show="showtimes" type="button" class="close"
                                        ng-click="delBox(box.boxNumber)">
                                    <span>×</span>
                                </button>
                                <div class="text-middle">
                                    <div>{{ box.boxNumber }}</div>
                                    <div>档案盒</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-1" style="height:100px;">
                            <div class="add-box">
                                <button class="add-btn add-box" ng-click="addFileBox(cabinetNumber,item,'add')">
                                    <i class="fa fa-plus icon-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="./plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./plugins/angular/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="./plugins/boostrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var myApp = angular.module('app', ['ui.bootstrap']);
    myApp.controller('fileCabinetCtrl', function ($scope, $http, $modal) {
        $scope.showSecondMenu = false;
        $scope.showSecondDetail = false;
        $scope.expend = true;
        $scope.totalFileCabinet = [];
        var params = {
            id: "",
            box: "",
            type: ""
        };

        //获取所有档案柜
        function _getTotalFileCabinet() {
            $http.get('http://127.0.0.1:8000/api/orginazation/orgdelete', {}).then(function (resp) {
                $scope.totalFileCabinet = resp.data;
            }, function (err) {
                //由于接口还未写好，调试使用
                $scope.totalFileCabinet = [
                    {id: 'A-001', value: 'A-001柜'},
                    {id: 'A-002', value: 'A-002柜'},
                    {id: 'A-003', value: 'A-003柜'}];
            });
        }

        $scope.showAllFileCabinet = function () {
            $scope.showSecondDetail = false;
            angular.element('#totalFileCabinet>ul>li').removeClass('select-menu');
            $scope.expend = !$scope.expend;
            $scope.getFileCabinetLists();
        };

        $scope.getFileCabinetLists = function () {
            //测试使用
            $scope.fileCabinetLists = [
                {number: 'A-001', numFiles: 2, Material: 30, manger: 'admin', address: '', remarks: 'aaaa'},
                {number: 'A-002', numFiles: 4, Material: 30, manger: 'admin', address: '', remarks: 'aaaa'},
                {number: 'A-003', numFiles: 5, Material: 30, manger: 'admin', address: '', remarks: 'aaaa'},
            ];
        };

        //获取当前选中的档案柜
        $scope.getSelectedFileCabinet = function (id) {
            //测试使用
            $scope.fileCabinetDetail = {
                'A-001': [
                    {id: '001', name: '001', children: [{boxNumber: 'A-1-001'}, {boxNumber: 'A-1-002'}]},
                    {id: '002', name: '002', children: [{boxNumber: 'A-2-001'}]},
                    {id: '003', name: '003', children: []},
                ],
                'A-002': [
                    {id: '001', name: '001', children: [{boxNumber: 'A-1-001'}, {boxNumber: 'A-1-002'}]},
                    {id: '002', name: '002', children: [{boxNumber: 'A-2-001'}]},
                ],
                'A-003': [
                    {id: '001', name: '001', children: [{boxNumber: 'A-1-001'}, {boxNumber: 'A-1-002'}]},
                ]
            };
            $http.get('http://127.0.0.1:8000/api/orginazation/orgdelete', {
                params: {
                    id: id
                }
            }).then(function (resp) {
            }, function (err) {
                //测试使用
                $scope.cabinetNumber = id;
                $scope.currentFileCabinetDetail = $scope.fileCabinetDetail[id];
            });
        };
        //添加档案盒
        $scope.addFileBox = function (cabinetNumber, cabinetGird, type) {
            $modal.open({
                templateUrl: './updateFileBox.html',
                controller: 'modalInstanceCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = cabinetNumber;
                        params.type = type;
                        return params;
                    }
                }
            });
        };

        //编辑档案盒
        $scope.editFileBox = function (cabinetNumber, cabinetGird, type) {
            $modal.open({
                templateUrl: './updateFileBox.html',
                controller: 'modalInstanceCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = cabinetNumber;
                        params.box = cabinetGird;
                        params.type = type;
                        return params;
                    }
                }
            });
        }

        //删除盒
        $scope.delBox = function (boxId) {

        }
        $scope.init = function () {
            _getTotalFileCabinet();
            $scope.getFileCabinetLists();
        };
        $scope.init();

        $scope.selectFileCabinet = function (id) {
            $scope.showSecondDetail = true;
            angular.element('#' + id).parent().children().removeClass('select-menu');
            angular.element('#' + id).addClass('select-menu');
            $scope.getSelectedFileCabinet(id);
        };

        //添加档案柜
        $scope.addCabinat = function (type, id) {
            $modal.open({
                templateUrl: './addCabinat.html',
                controller: 'addCabinatCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = id;
                        params.type = type;
                        return params;
                    }
                }
            });
        }

        //编辑档案柜
        $scope.editCabinat = function (type, id) {
            $modal.open({
                templateUrl: './addCabinat.html',
                controller: 'addCabinatCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = id;
                        params.type = type;
                        return params;
                    }
                }
            });
        }
    });

    myApp.controller('modalInstanceCtrl', function ($scope, $modalInstance, params, $http) {
        $scope.fileBox = {
            boxNum: "",
            Specifications: "",
            remarks: ""
        }
        //判断模态框是编辑还是添加
        if (params.type == "add") {
            $scope.modalTitle = "添加档案盒";
            $scope.confirm = function (form) {
                console.log("添加")
                $modalInstance.close();
                $http.post('http://127.0.0.1:8000/api/orginazation/orgadd', form).then(
                    function (resp) {
                        console.log("添加成功");
                    },
                    function (resp) {
                        alert("接口请求失败");
                    });
                $modalInstance.close();
            };
        } else {
            $scope.modalTitle = "编辑档案盒";
            $http({
                method: 'POST',
                url: '/api/orginazation/orgedit',
                data: {
                    "id": params.id
                },
            }).then(function successCallback(response) {
                $scope.fileBox.Specifications = response.data.data.id;
                $scope.fileBox.boxNum = response.data.data.org_name;
                $scope.fileBox.remarks = response.data.data.org_code;
            }, function errorCallback(response) {
                // 请求失败执行代码
            });
            //编辑确认
            $scope.confirm = function (form) {
                $modalInstance.close();
                $http.post('http://127.0.0.1:8000/api/orginazation/orgadd', form).then(
                    function (resp) {
                        console.log("添加成功");
                    },
                    function (resp) {
                        alert("接口请求失败");
                    });
            };
        }


        $scope.cancel = function () {
            $modalInstance.dismiss();
        };
    });

    //添加 编辑档案柜的模态框
    myApp.controller('addCabinatCtrl', function ($scope, $modalInstance, params) {
        if (params.type == "add") {
            $scope.modalTitle = "添加档案柜";
            $scope.addCabinatForm = {
                code: "",
                cabinatNum: "",
                material: "",
                posation: "",
                remarks: "",
                admin: ""
            };
            console.log("params");
            $scope.confirm = function (form) {
                $modalInstance.close();
                $http.post('http://127.0.0.1:8000/api/orginazation/orgadd', form).then(
                    function (resp) {
                        console.log("添加成功");
                    },
                    function (resp) {
                        alert("接口请求失败");
                    });
            };
        } else {
            $scope.modalTitle = "编辑档案柜";
            $http({
                method: 'POST',
                url: '/api/orginazation/orgedit',
                data: {
                    "id": params.id
                },
            }).then(function successCallback(response) {
                $scope.addCabinatForm.code = response.data.data.id;
                $scope.addCabinatForm.cabinatNum = response.data.data.parent_code == '-' ? "-" : "电信（陕西）云计算基地";
                $scope.addCabinatForm.material = response.data.data.org_name;
                $scope.addCabinatForm.posation = response.data.data.org_code;
                $scope.addCabinatForm.remarks = response.data.data.org_dec;
                $scope.addCabinatForm.admin = response.data.data.parent_id;
            }, function errorCallback(response) {
                // 请求失败执行代码
            });
            //编辑确认
            $scope.confirm = function (form) {
                $modalInstance.close();
                $http.post('http://127.0.0.1:8000/api/orginazation/orgadd', form).then(
                    function (resp) {
                        console.log("添加成功");
                    },
                    function (resp) {
                        alert("接口请求失败");
                    });
            };
        }


        $scope.cancel = function () {
            $modalInstance.dismiss();
        };
    });
</script>
</body>

</html>